<template>
  <div class="news_list">
    <my-header>严选专栏</my-header>
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        :style="{ background: `url(${item.pic}) no-repeat` }"
      >
        <h6>{{ item.title }}</h6>
        <p>{{ item.descript }}</p>
        <span>查看详情</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { getNewsList } from "../../api/home/home";
import myHeader from "../../components/myHeader.vue";
export default {
  components: { myHeader },
  setup() {
    const data = reactive({
      list: [], // 存放请求过来的新闻数据
    });
    getNewsList().then((res) => {
      data.list = res.data;
      console.log(data.list);
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.news_list {
  height: 100%;
}
ul {
  height: calc(100% - 100px);
  overflow-y: auto;
  padding: 10px;
  li {
    height: 382px;
    width: 100%;
    background-size: 100% 100% !important;
    margin-top: 10px;
    color: #fff;
    font-size: 32px;
    text-align: center;
    overflow: hidden;
    h6 {
      margin-top: 60px;
      font-size: 38px;
    }
    p {
      width: 75%;
      margin: 40px auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span{
      padding: 10px 20px;
      border: 2px solid #fff;
      border-radius: 40px;
    }
  }
}
</style>